  <template>
  <div style="align=center">
    <!-- <p>免疫登记</p> -->

    <div style="display: inline; margin-left: 3%">
      <h4 style="display: inline">免疫证号:</h4>
      <input
        type="text"
        style="display: inline; margin-left: 7%;height: 30px;"
        v-model="immune_num"
      />
    </div>
    <div style="margin-top: 3%; margin-left: 3%">
      <h4 style="display: inline">疫苗类型:</h4>
      <el-select
        style="margin-left: 7%; width: 14%"
        v-model="itype"
        placeholder="请选择"
      >
        <el-option
          v-for="item in type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div style="margin-top: 3%; margin-left: 3%">
      <h4 style="display: inline">疫苗编号:</h4>
      <el-select
        style="margin-left: 7%; width: 14%"
        v-model="number"
        placeholder="请选择"
      >
        <el-option
          v-for="item in vaccine_number"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <div style="margin-top: 3%; margin-left: 3%;width:15%">
      <h4 style="display: inline">免疫日期:</h4>
       <el-date-picker  
        style=" display: inline; margin-left:80%"
      v-model="immune_date"
      type="date"
      placeholder="选择日期"  :picker-options="pickerOptions"
       format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    </div>
  
    <div style="margin-top: 3%; margin-left: 3%">
      <h4 style="display: inline">犬只测量照片:</h4>
      <el-upload
        action="http://localhost:5051/image/upload"
        :show-file-list="false"
        :on-success="handlePersonImage"
        style="margin-left: 15%"
      >
        <img
          v-if="dog_positive_image"
          :src="dog_positive_image"
          class="height"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>


     <div style="margin-top: 3%; margin-left: 3%">
      <h4 style="display: inline">免疫证照片:</h4>
      <el-upload
        action="http://localhost:5051/image/upload"
        :show-file-list="false"
        :on-success="immuneImage"
        style="margin-left: 15%"
      >
        <img
          v-if="immune_info"
          :src="immune_info"
          class="height"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <div>
     
     <el-button   style="margin-left: 10%; margin-top: 10px" type="primary"  @click="add">免疫登记</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
          immune_info:"",
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      id: this.$route.params.id,
      dog_positive_image: "",
      immune_num: "",
      number: "",
      itype: "",
      vaccine_number: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      immune_date: "",
      precent_photo: "",
      type: [
        {
          value: "滴鼻免疫犬咳疫苗",
          label: "滴鼻免疫犬咳疫苗",
        },
        {
          value: " 第一次六联疫苗",
          label: "第一次六联疫苗",
        },
        {
          value: "第二次六联疫苗",
          label: "第二次六联疫苗",
        },
        {
          value: "第三次六联疫苗",
          label: "第三次六联疫苗",
        },
        {
          value: "狂犬疫苗",
          label: "狂犬疫苗",
        },
      ],
    };
  },
  methods: {
    
    //测量照片的回调函数
    handlePersonImage(res, file) {
      console.log(res);
      this.dog_positive_image = res.data;
    },
    //免疫证照片的回调函数
    immuneImage(res, file) {
      console.log(res);
      this.immune_info = res.data;
    },
    //免疫登记
    add() {
      // alert(sessionStorage.getItem("rid"));
   
    //   console.log(this.itype);
    // console.log(this.id)
      this.$axios
        .get(
          "http://localhost:9091/immune/register/add",
          
          {
            params: {
              immune_date: this.immune_date,
              type: this.itype,
              immune_num: this.immune_num,
              vaccine_number: this.number,
              precent_photo:this.dog_positive_image,
               oid:sessionStorage.getItem("rid"),
               immune_info:this.immune_info
            },
          }
        )
        .then((resp) => {
          if (resp.data.code == 200) {
          
            this.$message({
              type: "success",
             message: resp.data.message,
            });
            //添加成功进入犬只管理
      this.$router.push({
        path: "/hospital/verification/administration",
      });
          } 
          else {
            this.$message({
              type: "info",
             message: resp.data.message,
            });
          }
        });
    },

   
  },
  mounted() {
  
  },
  computed: {},
};
</script>
<style scoped>
.height{
height: 100px;
width: 200px;

}
</style>
